<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#animal {
				margin: 10px;
				border: 1px solid #708090;
				padding: 5px;
			}
		</style>
	</head>
	<body>

		<!-- 表单 -->
		<div id="ips">
			<!-- 
			颜色:<input type="color" name="" id="ip3" value="" ><br />
			日期+时间:<input type="datetime-local" name="" id="ip5" value="" placeholder="请输入时间和日期"/><br />
			小时:<input type="time" name="" id="ip8" value="" placeholder="请输入小时" /><br /> -->

			文本:<input type="text" name="" id="ip1" value="" placeholder="请输入内容" /><br />
			密码:<input type="password" name="" id="ip2" value="" placeholder="请输入密码" /><br />
			颜色:<input type="color" name="" id="ip3" value=""><br />
			日期:<input type="date" name="" id="ip4" value="" placeholder="请输入日期" /><br />
			日期+时间:<input type="datetime-local" name="" id="ip5" value="" placeholder="请输入时间和日期" /><br />
			月份:<input type="month" name="" id="ip6" value="" placeholder="请输入月份" /><br />
			周(星期)：<input type="week" name="" id="ip7" value="" placeholder="请输入星期" /><br />
			小时:<input type="time" name="" id="ip8" value="" placeholder="请输入小时" /><br />
			文本域<textarea id="ip9"></textarea><br />
			<br />
			<br />
			<button type="button" onclick="fn1()">获取ip1-9的内容</button>
			<br />
			<button type="button" onclick="fn11()">给ip1-9分别设置默认值</button>
		</div>
		<br />
		<br />

		<!-- 二选一单选 -->
		<!-- label  让两个选项处在同一个选择范围 必须二选一 -->
		<div id="sex">
			<label>
				男:<input type="radio" name="sex" id="" value="0" />
			</label>
			<label>
				女:<input type="radio" name="sex" id="" value="1" checked="checked" />
			</label>
			<br />
			<br />
			<div id="">
				<button type="button" onclick="fn2()">获取性别</button><br />
				<button type="button" onclick="fn22()">选中性别：女</button>
			</div>
		</div>
		<br />
		<br />

		<!-- 多项选择 -->
		<div id="animal">
			<div id="">
				你喜欢的小动物
			</div>
			<br />
			<div id="loveAni">
				<label>
					猫咪<input type="checkbox" name="" id="" value="猫咪" onclick="fn3()" />
				</label>
				<label>
					狗子<input type="checkbox" name="" id="" value="狗子" onclick="fn3()" />
				</label>
				<label>
					金鱼<input type="checkbox" name="" id="" value="金鱼" onclick="fn3()" />
				</label>
				<label>
					螃蟹<input type="checkbox" name="" id="" value="螃蟹" onclick="fn3()" />
				</label>
				<label>
					乌龟<input type="checkbox" name="" id="" value="乌龟" onclick="fn3()" />
				</label>
			</div>
			<br />
			<div id="">
				<button type="button" onclick="fn31()">获取选中项</button><br />
				<button type="button" onclick="fn33()">设置选中项</button><br />
				<br />
				<label>
					<!-- 参数this -->
					全选/全不选<input type="checkbox" name="" id="checkAll" value="" onclick="fn34(this)" />
				</label>
				<br />
				<button type="button" onclick="fn35()">反选</button>
			</div>

		</div>









		<script type="text/javascript">
			function fn1() {
				var ip1 = document.getElementById("ip1");
				var ip1Value = ip1.value;
				console.log("ip1Value", ip1Value);

				var ip2 = document.getElementById("ip2");
				var ip2Value = ip2.value;
				console.log("ip2Value", ip2Value);

				var ip3 = document.getElementById("ip3");
				var ip3Value = ip3.value;
				console.log("ip3Value", ip3Value);

				var ip4 = document.getElementById("ip4");
				var ip4Value = ip4.value;
				console.log("ip4Value", ip4Value);

				var ip5 = document.getElementById("ip5");
				var ip5Value = ip5.value;
				console.log("ip5Value", ip5Value);

				var ip6 = document.getElementById("ip6");
				var ip6Value = ip6.value;
				console.log("ip6Value", ip6Value);

				var ip7 = document.getElementById("ip7");
				var ip7Value = ip7.value;
				console.log("ip7Value", ip7Value);

				var ip8 = document.getElementById("ip8");
				var ip8Value = ip8.value;
				console.log("ip8Value", ip8Value);

				var ip9 = document.getElementById("ip9");
				var ip9Value = ip9.value;
				console.log("ip9Value", ip9Value);

			}

			/* ip1Value 11
			作业.html:32 ip2Value 11
			作业.html:36 ip3Value #ff8000
			作业.html:40 ip4Value 2020-06-03
			作业.html:44 ip5Value 2021-06-03T23:00
			作业.html:48 ip6Value 2020-01
			作业.html:52 ip7Value 2020-W01
			作业.html:56 ip8Value 00:59
			作业.html:60 ip9Value 1 */

			//有时候js报错，Uncaught TypeError: Cannot read property 'addEventListener' of null;
			//把代码放bai到window.onload=function(){...}里面

			function fn11() {
				var ip1 = document.getElementById("ip1");
				ip1.value = "我是小白（默认值）";

				var ip1 = document.getElementById("ip1");
				ip1.value = "我是小白（默认值）";

				var ip2 = document.getElementById("ip2");
				ip2.value = "123456（默认值）";

				var ip3 = document.getElementById("ip3");
				ip3.value = "#555555"; //设置颜色必须用十六进制

				var ip4 = document.getElementById("ip4");
				ip4.value = "2020-06-11";
				//日期格式 2020-06-11

				var ip5 = document.getElementById("ip5");
				ip5.value = "2020-06-11T00:00";
				//日期+时间格式 2020-06-11T00:00

				var ip6 = document.getElementById("ip6");
				ip6.value = "2020-06";
				//月份格式 2020-06

				var ip7 = document.getElementById("ip7");
				ip7.value = "2020-W27";
				//周格式 2020-W27

				var ip8 = document.getElementById("ip8");
				ip8.value = "00:00";
				//时间格式 00:00

				var ip9 = document.getElementById("ip9");
				ip9.value = "文本（默认值）";
			}

			function fn2() {
				var sex = document.querySelectorAll("div#sex input[type = 'Radio']");
				console.log(sex);
				//sex
				/* NodeList(2) [input, input]
				0: input
				1: input
				length: 2
				__proto__: NodeList */
				var sexV;
				if (sex[0].checked) {
					sexV = sex[0].value;
				} else {
					sexV = sex[1].value;
				}
				//console.log(sexV);//1
				console.log("sexV:", sexV, "你选中了", sexV == 0 ? "小哥哥" : "小姐姐"); //此处是 == 
			}

			function fn22() {
				var sex = document.querySelectorAll("div#sex input[type = 'Radio']");
				sex[1].checked = true; //sex[0]是男  sex[1]是女
			}

			//是否需要选中    全选/全不选
			function fn3() {
				var checkAll = document.getElementById("checkAll");
				var ips = document.querySelectorAll("div#loveAni label input[type='checkbox']");
				var f = true;
				for (var i = 0; i < ips.length; i++) {
					if (!ips[i].checked) {
						f = false;
						break;
					}
				}
				checkAll.checked = f;
			}
			//反选
			function fn35() {
				var ips = document.querySelectorAll("div#loveAni label input[type='checkbox']");
				for (var i = 0; i < ips.length; i++) {

					ips[i].checked = !ips[i].checked; // !取反

				}

				fn3(); //判断是否选中 全选/全不选
			}
			//全选/全不选
			function fn34(that) {
				//console.log("全选/全不选",that,"我自己是否被选中",that.checked);

				var f = that.checked; //全选/全不选 的选中状态

				var ips = document.querySelectorAll("div#loveAni label input[type='checkbox']");
				for (var i = 0; i < ips.length; i++) {
					ips[i].checked = f;
				}

			}
			//获取 多选框 选中项
			function fn31() {
				var ips = document.querySelectorAll("div#loveAni label input[type='checkbox']");
				console.log("ips:", ips);
				var animallArr = []; //存放被选中项
				for (var i = 0; i < ips.length; i++) {
					if (ips[i].checked) {
						animallArr.push(ips[i].value);
					}
				}

				console.log("你选中了:", animallArr);
			}

			//设置 多选框 选中项
			function fn33() {
				var ips = document.querySelectorAll("div#loveAni label input[type='checkbox']");
				ips[0].checked = true;
				ips[2].checked = true;
				ips[4].checked = true;
			}
		</script>
	</body>
</html>
